<template>
    <div class="vip-list">
        <view class="box-title">تەڭگىگە ئالاھىدە ئەزالىق ئالماشتۇرۇش</view>
        <div class="item" v-if="item.type=='coin'" v-for="(item, index) in viplist" :key="index">
            <div class="title">{{item.title}}</div>
            <div class="coin">{{item.coin}} تەڭگە</div>
            <div @click="handleBuyvip(item)" class="buyButton">ئالماشتۇرۇش</div>
            <div class="price">{{item.original_price}} تەڭگە</div>
        </div>
    </div>
</template>

<script>
    import {
        buyvip
    } from '@/api/coin.js'
    import {
        navigateBack
    } from '@/scripts/compatible/pageOptions.js'
    export default {
        data() {
            return {
                record: {}
            }
        },
        methods: {
            async handleBuyvip(item) {
                this.record = JSON.parse(JSON.stringify(item))
                const res = await buyvip(this)
                if (res) {
                    uni.showToast({
                        title: "ئالماشتۇرۇش مۇۋاپىقىيەتلىك بولدى",
                        icon: 'success',
                        complete: () => {
                            navigateBack()
                        }
                    })
                } else {
                    uni.showToast({
                        title: '请求失败',
                        icon: 'error'
                    })
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
    .vip-list {
        overflow: hidden;
        background-color: #fff;
        margin-top: 15px;
        direction: rtl;
        padding-bottom: 15px;


        .box-title,
        .item {
            overflow: hidden;
            height: 80rpx;
            line-height: 80rpx;
            padding: 0 30rpx;
        }

        .item {
            display: block;

            .title {
                float: right;
                overflow: hidden;
                margin-left: 30rpx;
            }

            .coin {
                margin-left: 30rpx;
                float: right;
                color: #f12711;
            }

            .price {
                float: left;
                color: #999;
                text-decoration: line-through;
                margin-left: 50rpx;
            }

            .buyButton {
                overflow: hidden;
                float: left;
                padding: 0 20rpx;
                height: 60rpx;
                line-height: 56rpx;
                font-size: 24rpx;
                background-image: linear-gradient(45deg, #f12711 0%, #f5af19 100%);
                color: #fff;
                border-radius: 10rpx;
                margin-top: 10rpx;
            }
        }
    }
</style>